/*
八种等高布局方式
http://www.w3cplus.com/css/creaet-equal-height-columns
*/
/*=============================================================================*/
 * css table 等高布局(IE7不支持)
 * table-cell会被一些CSS属性破坏，例如float,position:absolute。
 * table-cell元素对宽度高度敏感，对margin值无反应，响应padding属性，基本就是活脱脱的 td 元素。

.table {
	display: table;
	 /* width: 100%; */ /* ? */
	table-layout: fixed;
}
.table-cell {
	display: table-cell;
	float: none;
	margin: 0;
	overflow: hidden;
	vertical-align: top;
	/* background: #EEE; */
	/* border: 1px solid #AAA; */
}
/* 如果把背景放到 table-cell, 则已经实现等高效果, 如果把背景放到 table-cell 里面的div上, 则需添加如下样式 */
.table-cell > div {
	padding-bottom: 10000px;
	margin-bottom: -10000px;
	/* background: #EEE; */
	/* 不能使用 border, 因为 border-bottom 会被父层遮盖 */
} 

/*=============================================================================*/
 * 通过更高的列撑高父层, 父层overflow hidden
 * 这里 float 是 left, 或 right 都没关系, 或者 margin, 只要能在同一行就行了. (支持多列)

.eq-height-container {
	overflow: hidden;
}
.eq-height-container > div.left {
	float: left;
	width: 300px;
}
.eq-height-container > div.right {
	float: right;
	width: 500px;
	/* or */
	/* margin-left 的方式在IE7 下会以margin-left所在列的高度作为最高高度 */
	/* margin-left: 300px; */
}

.eq-height-container > div.left,
.eq-height-container > div.right {
	padding-bottom: 10000px !important;
	margin-bottom: -10000px !important;
}
.eq-height-container > div.left {
	background: green;
}
.eq-height-container > div.right {
	background: yellow;
}
